<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 偽類就等於數學中的N(假設) */

        /* 將ul裡的第一個li設置為紅色 */
        ul>li{
            color: red;
             
        }
        /* 
            偽類(不存在的類,特殊的類)
                -偽類用來描述一個元素的特殊狀態
                    比如:第一個字元素,被點擊的元素,鼠標移入的元素
                -偽類一般情況下都是使用:開頭
                    :first-child
                    意思是第一個子元素
                    :last-child
                    最後一個子元素
                    :nth-child()選中第n個子元素
                        特殊值:
                            n   第n個   n的範圍0到正無窮
                            2n或者even 表示選中偶數位的元素
                            2n+1或者odd 表示選中奇數位的元素
                            
                    -以上這些偽類都是根據所有的子元素進行排序
                    
                    :first-of-type
                    :last-of-type
                    :nth-of-type()
                        -這幾個偽類的功能和上述的類似,不同點是他們是在
                        同類型元素中進行排序
                   
                - :not()否定偽類
                    -將符合條件的尾速從選擇器中去除
        */
        
        ul>li:first-child{
            color: red;
             
        }
        
        ul>li:nth-child(even){
            color: red;
             
        }

        ul>li:nth-child(odd){
            color: sienna;
        }

        ul>li:first-of-type{
                color: teal;
        }

        ul>li:not(li:nth-child(3)){
                color: azure;
        }

    </style>
</head>
<body>
    <ul>
        <span>我tm是一個span</span>
        <li>第一個</li>
        <li>第二個</li>
        <li>第三個</li>
        <li>第四個</li>
        <li>第五個</li>
    </ul>
</body>
</html>